﻿<UserControl
    x:Class="WinRTXamlToolkit.Sample.Views.ChartTestView"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:WinRTXamlToolkit.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:charting="using:WinRTXamlToolkit.Controls.DataVisualization.Charting"
    xmlns:Series="using:WinRTXamlToolkit.Controls.DataVisualization.Charting"
    xmlns:datavis="using:WinRTXamlToolkit.Controls.DataVisualization"
    xmlns:extensions="using:WinRTXamlToolkit.Controls.Extensions">
    <extensions:PageExtensions.BottomAppBar>
        <CommandBar>
            <AppBarButton
                x:Name="AddAppBarButton"
                Label="Update"
                Click="OnUpdateButtonClick"
                Icon="Refresh" />
            <!--<CommandBar.SecondaryCommands>
                <AppBarButton
                    x:Name="SecondaryButton1"
                    Label="secondary command 1" />
                <AppBarButton
                    x:Name="SecondaryButton2"
                    Label="secondary command 2" />
            </CommandBar.SecondaryCommands>-->
        </CommandBar>
    </extensions:PageExtensions.BottomAppBar>
    <ScrollViewer
        x:Name="MainScrollViewer"
        SizeChanged="MainScrollViewer_OnSizeChanged"
        HorizontalScrollMode="Disabled"
        HorizontalScrollBarVisibility="Hidden"
        ZoomMode="Disabled"
        VerticalScrollMode="Enabled"
        VerticalScrollBarVisibility="Visible"
        VerticalSnapPointsAlignment="Center"
        VerticalSnapPointsType="MandatorySingle">
        <StackPanel
            x:Name="ScrollablePanel">
            <StackPanel.ChildrenTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition />
                </TransitionCollection>
            </StackPanel.ChildrenTransitions>

            <Grid
                x:Name="UpperHalfGrid">
                <Grid.RowDefinitions>
                    <RowDefinition
                        Height="Auto" />
                    <RowDefinition
                        Height="*" />
                </Grid.RowDefinitions>
                <TextBlock
                    Text="Chart Tests"
                    Style="{ThemeResource TitleTextBlockStyle}"
                    Typography.Capitals="SmallCaps" />

                <FlipView
                    x:Name="ChartsList"
                    Grid.Row="1">
                    <charting:Chart
                        x:Name="PieChart"
                        Title="Pie Chart"
                        Margin="0,0">
                        <charting:Chart.Series>
                            <Series:PieSeries
                                Title="Population"
                                ItemsSource="{Binding Items}"
                                IndependentValueBinding="{Binding Name}"
                                DependentValueBinding="{Binding Value}"
                                IsSelectionEnabled="True" />
                        </charting:Chart.Series>
                    </charting:Chart>
                    <Viewbox>
                        <charting:Chart
                            x:Name="PieChartWithCustomDesign"
                            Title="Pie Chart with Custom Design"
                            Margin="0,0">
                            <charting:Chart.Palette>
                                <charting:ResourceDictionaryCollection>
                                    <!-- Gold -->
                                    <ResourceDictionary>
                                        <SolidColorBrush
                                            x:Key="Background"
                                            Color="Gold" />
                                        <Style
                                            x:Key="DataPointStyle"
                                            TargetType="Control">
                                            <Setter
                                                Property="Background"
                                                Value="{StaticResource Background}" />
                                        </Style>
                                        <Style
                                            x:Key="DataShapeStyle"
                                            TargetType="Shape">
                                            <Setter
                                                Property="Stroke"
                                                Value="{StaticResource Background}" />
                                            <Setter
                                                Property="StrokeThickness"
                                                Value="2" />
                                            <Setter
                                                Property="StrokeMiterLimit"
                                                Value="1" />
                                            <Setter
                                                Property="Fill"
                                                Value="{StaticResource Background}" />
                                        </Style>
                                    </ResourceDictionary>
                                    <!-- Green -->
                                    <ResourceDictionary>
                                        <SolidColorBrush
                                            x:Key="Background"
                                            Color="GreenYellow" />
                                        <Style
                                            x:Key="DataPointStyle"
                                            TargetType="Control">
                                            <Setter
                                                Property="Background"
                                                Value="{StaticResource Background}" />
                                        </Style>
                                        <Style
                                            x:Key="DataShapeStyle"
                                            TargetType="Shape">
                                            <Setter
                                                Property="Stroke"
                                                Value="{StaticResource Background}" />
                                            <Setter
                                                Property="StrokeThickness"
                                                Value="2" />
                                            <Setter
                                                Property="StrokeMiterLimit"
                                                Value="1" />
                                            <Setter
                                                Property="Fill"
                                                Value="{StaticResource Background}" />
                                        </Style>
                                    </ResourceDictionary>
                                    <!--Blue-->
                                    <ResourceDictionary>
                                        <SolidColorBrush
                                            x:Key="Background"
                                            Color="LightSkyBlue" />
                                        <Style
                                            x:Key="DataPointStyle"
                                            TargetType="Control">
                                            <Setter
                                                Property="Background"
                                                Value="{StaticResource Background}" />
                                        </Style>
                                        <Style
                                            x:Key="DataShapeStyle"
                                            TargetType="Shape">
                                            <Setter
                                                Property="Stroke"
                                                Value="{StaticResource Background}" />
                                            <Setter
                                                Property="StrokeThickness"
                                                Value="2" />
                                            <Setter
                                                Property="StrokeMiterLimit"
                                                Value="1" />
                                            <Setter
                                                Property="Fill"
                                                Value="{StaticResource Background}" />
                                        </Style>
                                    </ResourceDictionary>
                                    <!--Purple-->
                                    <ResourceDictionary>
                                        <SolidColorBrush
                                            x:Key="Background"
                                            Color="MediumPurple" />
                                        <Style
                                            x:Key="DataPointStyle"
                                            TargetType="Control">
                                            <Setter
                                                Property="Background"
                                                Value="{StaticResource Background}" />
                                        </Style>
                                        <Style
                                            x:Key="DataShapeStyle"
                                            TargetType="Shape">
                                            <Setter
                                                Property="Stroke"
                                                Value="{StaticResource Background}" />
                                            <Setter
                                                Property="StrokeThickness"
                                                Value="2" />
                                            <Setter
                                                Property="StrokeMiterLimit"
                                                Value="1" />
                                            <Setter
                                                Property="Fill"
                                                Value="{StaticResource Background}" />
                                        </Style>
                                    </ResourceDictionary>
                                    <!--Brown-->
                                    <ResourceDictionary>
                                        <SolidColorBrush
                                            x:Key="Background"
                                            Color="SandyBrown" />
                                        <Style
                                            x:Key="DataPointStyle"
                                            TargetType="Control">
                                            <Setter
                                                Property="Background"
                                                Value="{StaticResource Background}" />
                                        </Style>
                                        <Style
                                            x:Key="DataShapeStyle"
                                            TargetType="Shape">
                                            <Setter
                                                Property="Stroke"
                                                Value="{StaticResource Background}" />
                                            <Setter
                                                Property="StrokeThickness"
                                                Value="2" />
                                            <Setter
                                                Property="StrokeMiterLimit"
                                                Value="1" />
                                            <Setter
                                                Property="Fill"
                                                Value="{StaticResource Background}" />
                                        </Style>
                                    </ResourceDictionary>
                                </charting:ResourceDictionaryCollection>
                            </charting:Chart.Palette>
                            <charting:Chart.TitleStyle>
                                <Style
                                    TargetType="datavis:Title">
                                    <Setter
                                        Property="Background"
                                        Value="#444" />
                                    <Setter
                                        Property="HorizontalContentAlignment"
                                        Value="Center" />
                                    <Setter
                                        Property="VerticalContentAlignment"
                                        Value="Top" />
                                    <Setter
                                        Property="IsTabStop"
                                        Value="False" />
                                    <Setter
                                        Property="Padding"
                                        Value="10" />
                                    <Setter
                                        Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate
                                                TargetType="datavis:Title">
                                                <Border
                                                    CornerRadius="10"
                                                    Background="{TemplateBinding Background}">
                                                    <ContentPresenter
                                                        FontSize="36"
                                                        FontWeight="SemiBold"
                                                        FontStretch="Condensed"
                                                        Content="{TemplateBinding Content}"
                                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                                        Margin="{TemplateBinding Padding}"
                                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                                </Border>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </charting:Chart.TitleStyle>
                            <charting:Chart.LegendStyle>
                                <Style
                                    TargetType="datavis:Legend">
                                    <Setter
                                        Property="VerticalAlignment"
                                        Value="Stretch" />
                                    <Setter
                                        Property="Background"
                                        Value="#444" />
                                    <Setter
                                        Property="ItemsPanel">
                                        <Setter.Value>
                                            <ItemsPanelTemplate>
                                                <controls:UniformGrid
                                                    Columns="1"
                                                    Rows="5" />
                                            </ItemsPanelTemplate>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter
                                        Property="TitleStyle">
                                        <Setter.Value>
                                            <Style
                                                TargetType="datavis:Title">
                                                <Setter
                                                    Property="Margin"
                                                    Value="0,5,0,10" />
                                                <Setter
                                                    Property="FontWeight"
                                                    Value="Bold" />
                                                <Setter
                                                    Property="HorizontalAlignment"
                                                    Value="Center" />
                                            </Style>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter
                                        Property="ItemContainerStyle"
                                        xmlns:series="using:WinRTXamlToolkit.Controls.DataVisualization.Charting">
                                        <Setter.Value>
                                            <Style
                                                TargetType="series:LegendItem">
                                                <Setter
                                                    Property="Template">
                                                    <Setter.Value>
                                                        <ControlTemplate
                                                            TargetType="series:LegendItem">
                                                            <Border
                                                                MinWidth="200"
                                                                Margin="20,10"
                                                                CornerRadius="10"
                                                                VerticalAlignment="Stretch"
                                                                HorizontalAlignment="Stretch"
                                                                Background="{Binding Background}">
                                                                <datavis:Title
                                                                    HorizontalAlignment="Center"
                                                                    VerticalAlignment="Center"
                                                                    FontSize="24"
                                                                    FontWeight="Bold"
                                                                    Content="{TemplateBinding Content}" />
                                                            </Border>
                                                        </ControlTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                            </Style>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter
                                        Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate
                                                TargetType="datavis:Legend">
                                                <Border
                                                    CornerRadius="10"
                                                    Background="{TemplateBinding Background}"
                                                    BorderBrush="{TemplateBinding BorderBrush}"
                                                    BorderThickness="{TemplateBinding BorderThickness}"
                                                    Padding="2">
                                                    <Grid>
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition
                                                                Height="Auto" />
                                                            <RowDefinition />
                                                        </Grid.RowDefinitions>
                                                        <datavis:Title
                                                            Grid.Row="0"
                                                            x:Name="HeaderContent"
                                                            Content="{TemplateBinding Header}"
                                                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                                                            Style="{TemplateBinding TitleStyle}" />
                                                        <ScrollViewer
                                                            Grid.Row="1"
                                                            VerticalScrollBarVisibility="Auto"
                                                            BorderThickness="0"
                                                            Padding="0"
                                                            IsTabStop="False">
                                                            <ItemsPresenter
                                                                x:Name="Items"
                                                                Margin="10,0,10,10" />
                                                        </ScrollViewer>
                                                    </Grid>
                                                </Border>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </charting:Chart.LegendStyle>
                            <charting:Chart.Series>
                                <Series:PieSeries
                                    Title="Population"
                                    ItemsSource="{Binding Items}"
                                    IndependentValueBinding="{Binding Name}"
                                    DependentValueBinding="{Binding Value}"
                                    IsSelectionEnabled="True" />
                            </charting:Chart.Series>
                        </charting:Chart>
                    </Viewbox>
                    <charting:Chart
                        x:Name="Chart"
                        Title="Column Chart"
                        Margin="0,0">
                        <charting:Chart.Series>
                            <charting:ColumnSeries
                                Title="Population"
                                ItemsSource="{Binding Items}"
                                IndependentValueBinding="{Binding Name}"
                                DependentValueBinding="{Binding Value}"
                                IsSelectionEnabled="True" />
                        </charting:Chart.Series>
                    </charting:Chart>
                    <charting:Chart
                        x:Name="BarChart"
                        Title="Bar Chart"
                        Margin="0,0">
                        <charting:BarSeries
                            Title="Population"
                            IndependentValueBinding="{Binding Name}"
                            DependentValueBinding="{Binding Value}"
                            IsSelectionEnabled="True" />
                    </charting:Chart>
                    <charting:Chart
                        x:Name="LineChart"
                        Title="Line Chart"
                        Margin="0,0">
                        <charting:LineSeries
                            Title="Population"
                            IndependentValueBinding="{Binding Name}"
                            DependentValueBinding="{Binding Value}"
                            IsSelectionEnabled="True" />
                    </charting:Chart>
                    <charting:Chart
                        x:Name="LineChartWithAxes"
                        Title="Line Chart w/Manually Set Axis Range"
                        Margin="0,0">
                        <charting:LineSeries
                            Title="Population"
                            IndependentValueBinding="{Binding Name}"
                            DependentValueBinding="{Binding Value}"
                            IsSelectionEnabled="True" />
                    </charting:Chart>
                    <charting:Chart
                        x:Name="LineChart2"
                        Title="Line Chart Without Data Points"
                        Margin="0,0">
                        <charting:LineSeries
                            Title="Population"
                            IndependentValueBinding="{Binding Name}"
                            DependentValueBinding="{Binding Value}"
                            IsSelectionEnabled="True">
                            <charting:LineSeries.DataPointStyle>
                                <Style
                                    TargetType="charting:LineDataPoint">
                                    <Setter
                                        Property="BorderThickness"
                                        Value="0" />
                                    <Setter
                                        Property="IsTabStop"
                                        Value="False" />
                                    <Setter
                                        Property="Width"
                                        Value="0" />
                                    <Setter
                                        Property="Height"
                                        Value="0" />
                                    <Setter
                                        Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate
                                                TargetType="charting:LineDataPoint">
                                                <Grid
                                                    x:Name="Root"
                                                    Opacity="0" />
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </charting:LineSeries.DataPointStyle>
                        </charting:LineSeries>
                    </charting:Chart>
                    <charting:Chart
                        x:Name="MixedChart"
                        Title="Mixed Chart"
                        Margin="0,0">
                        <charting:ColumnSeries
                            Title="Population"
                            ItemsSource="{Binding Items}"
                            IndependentValueBinding="{Binding Name}"
                            DependentValueBinding="{Binding Value}"
                            IsSelectionEnabled="True" />
                        <charting:LineSeries
                            Title="Population"
                            IndependentValueBinding="{Binding Name}"
                            DependentValueBinding="{Binding Value}"
                            IsSelectionEnabled="True" />
                    </charting:Chart>
                    <charting:Chart
                        x:Name="AreaChart"
                        Title="Area Chart"
                        Margin="0,0">
                        <charting:AreaSeries
                            Title="Population"
                            IndependentValueBinding="{Binding Name}"
                            DependentValueBinding="{Binding Value}"
                            IsSelectionEnabled="True" />
                    </charting:Chart>
                    <charting:Chart
                        x:Name="BubbleChart"
                        Title="Bubble Chart"
                        Margin="0,0">
                        <charting:BubbleSeries
                            Title="Population"
                            IndependentValueBinding="{Binding Name}"
                            DependentValueBinding="{Binding Value}"
                            IsSelectionEnabled="True" />
                    </charting:Chart>
                    <charting:Chart
                        x:Name="ScatterChart"
                        Title="Scatter Chart"
                        Margin="0,0">
                        <charting:ScatterSeries
                            Title="Population"
                            IndependentValueBinding="{Binding Name}"
                            DependentValueBinding="{Binding Value}"
                            IsSelectionEnabled="True" />
                    </charting:Chart>
                    <charting:Chart
                        x:Name="StackedBar"
                        Title="Stacked Bar Chart"
                        Margin="0,0">
                        <charting:StackedBarSeries>
                            <charting:SeriesDefinition
                                DependentValuePath="Value"
                                IndependentValuePath="Name"
                                IsTapEnabled="True"
                                Title="Doodad" />
                            <charting:SeriesDefinition
                                DependentValuePath="Value"
                                IndependentValuePath="Name"
                                IsTapEnabled="True"
                                Title="Gizmo" />
                            <charting:SeriesDefinition
                                DependentValuePath="Value"
                                IndependentValuePath="Name"
                                IsTapEnabled="True"
                                Title="Widget" />

                        </charting:StackedBarSeries>
                    </charting:Chart>
                    <charting:Chart
                        x:Name="StackedBar100"
                        Title="100% Stacked Bar Chart"
                        Margin="0,0">
                        <charting:Stacked100BarSeries>
                            <charting:SeriesDefinition
                                DependentValuePath="Value"
                                IndependentValuePath="Name"
                                IsTapEnabled="True"
                                Title="Doodad" />
                            <charting:SeriesDefinition
                                DependentValuePath="Value"
                                IndependentValuePath="Name"
                                IsTapEnabled="True"
                                Title="Gizmo" />
                            <charting:SeriesDefinition
                                DependentValuePath="Value"
                                IndependentValuePath="Name"
                                IsTapEnabled="True"
                                Title="Widget" />

                        </charting:Stacked100BarSeries>
                    </charting:Chart>
                    <charting:Chart
                        x:Name="StackedColumn"
                        Title="Stacked Column Chart"
                        Margin="0,0">
                        <charting:StackedColumnSeries>
                            <charting:SeriesDefinition
                                DependentValuePath="Value"
                                IndependentValuePath="Name"
                                IsTapEnabled="True"
                                Title="Doodad" />
                            <charting:SeriesDefinition
                                DependentValuePath="Value"
                                IndependentValuePath="Name"
                                IsTapEnabled="True"
                                Title="Gizmo" />
                            <charting:SeriesDefinition
                                DependentValuePath="Value"
                                IndependentValuePath="Name"
                                IsTapEnabled="True"
                                Title="Widget" />
                        </charting:StackedColumnSeries>
                    </charting:Chart>
                    <charting:Chart
                        x:Name="StackedColumn100"
                        Title="100% Stacked Column Chart"
                        Margin="0,0">
                        <Series:Stacked100ColumnSeries>
                            <charting:SeriesDefinition
                                DependentValuePath="Value"
                                IndependentValuePath="Name"
                                IsTapEnabled="True"
                                Title="Doodad" />
                            <charting:SeriesDefinition
                                DependentValuePath="Value"
                                IndependentValuePath="Name"
                                IsTapEnabled="True"
                                Title="Gizmo" />
                            <charting:SeriesDefinition
                                DependentValuePath="Value"
                                IndependentValuePath="Name"
                                IsTapEnabled="True"
                                Title="Widget" />
                        </Series:Stacked100ColumnSeries>
                    </charting:Chart>
                </FlipView>
            </Grid>
            <Grid
                x:Name="LowerHalfGrid">
                <Grid.RowDefinitions>
                    <RowDefinition
                        Height="Auto" />
                    <RowDefinition
                        Height="*" />
                </Grid.RowDefinitions>
                <TextBlock
                    Text="Chart type index below"
                    Style="{ThemeResource TitleTextBlockStyle}"
                    Typography.Capitals="SmallCaps"
                    Tapped="OnIndexLabelTapped" />
                <ListView
                    x:Name="ChartsIndex"
                    Grid.Row="1"
                    SelectionMode="Single"
                    SelectionChanged="ChartsIndex_OnSelectionChanged"
                    SelectedIndex="{Binding SelectedIndex, ElementName=ChartsList, Mode=TwoWay}">
                    <ListView.ItemContainerStyle>
                        <Style
                            TargetType="ListViewItem">
                            <Setter
                                Property="Padding"
                                Value="12,5" />
                            <Setter
                                Property="FontWeight"
                                Value="SemiBold" />
                        </Style>
                    </ListView.ItemContainerStyle>
                    <TextBlock>Pie Chart</TextBlock>
                    <TextBlock>Pie Chart with Custom Design</TextBlock>
                    <TextBlock>Column Chart</TextBlock>
                    <TextBlock>Bar Chart</TextBlock>
                    <TextBlock>Line Chart</TextBlock>
                    <TextBlock>Line Chart w/Manually Set Axis Range</TextBlock>
                    <TextBlock>Line Chart Without Data Points</TextBlock>
                    <TextBlock>Mixed Chart</TextBlock>
                    <TextBlock>Area Chart</TextBlock>
                    <TextBlock>Bubble Chart</TextBlock>
                    <TextBlock>Scatter Chart</TextBlock>
                    <TextBlock>Stacked Bar Chart</TextBlock>
                    <TextBlock>100% Stacked Bar Chart</TextBlock>
                    <TextBlock>Stacked Column Chart</TextBlock>
                    <TextBlock>100% Stacked Column Chart</TextBlock>
                </ListView>
            </Grid>
        </StackPanel>
    </ScrollViewer>
</UserControl>
